<template>
  <view class="pagination">
    <button 
      @click="changePage(currentPage - 1)" 
      :disabled="currentPage === 1"
    >上一页</button>
    
    <text class="page-info">{{ currentPage }}/{{ totalPages }}</text>
    
    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages"
    >下一页</button>
  </view>
</template>

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    }
  },
  methods: {
    changePage(page) {
      if(page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        this.$emit('page-change', this.currentPage)
      }
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: 30rpx;
}
button:disabled {
  opacity: 0.5;
}
.page-info {
  color: #666;
}
</style>